<template>
  <div class="box">
    <div class="header">
      <div class="headerContent">
        <div class="left">
          <el-dropdown class="elDrop">
            <div class="oper">
              <p class="operInfo">{{ operationName }}</p>
            </div>
            <template #dropdown>
              <el-dropdown-menu class="navLeft_drop">
                <el-dropdown-item v-for="(item,idx) in operationList" @click="changeOper(idx)" :key="item.businessName">{{ item.businessName }}</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
        <div class="mid">
          <div :class="{ business: true, check: idx === nowBusiness }" v-for="(item, idx) in businessRoutes" :key="item.meta.title"
            @click="navigateTo(idx, item.path)">
            <div :class="{ 'icon-check': idx === nowBusiness, 'icon': idx !== nowBusiness }" v-html="getSvg(item.meta.icon,25)"></div>
            <p :class="{ businessName: true, check: idx === nowBusiness }">{{ item.meta.title }}</p>
          </div>
        </div>
        <div class="right">
          <p class="loginInfo">{{ userStore.userInfo.userName }}</p>
          <el-dropdown class="elDrop">
            <span>
              <el-icon size="30" color="var(--Nav-rightleft-color)">
                <Avatar />
              </el-icon>
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item @click="toHome()">回到主页</el-dropdown-item>
                <el-dropdown-item>修改密码</el-dropdown-item>
                <el-dropdown-item @click="openThemeDialog()">切换主题</el-dropdown-item>
                <el-dropdown-item @click="toManage()">管理设置</el-dropdown-item>
                <el-dropdown-item @click="exit()">退出账号</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
          <ThemeDialog ref="themeDialogVisible" />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, reactive,isProxy } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { DataLine, Avatar } from '@element-plus/icons-vue';
import { ElMessage } from 'element-plus';
import ThemeDialog from '@/components/ThemeDialog/ThemeDialog.vue';
import useUserStore from '../../store/user';
import useOperationStore from '../../store/operation';
import { getSvg } from '@/common/svg'
import eventBus from '@/eventBus.js'
// 用户存储
let userStore=useUserStore()
// 业务存储
let operationStore=useOperationStore()
let operationId = ref(operationStore.data.length>0?operationStore.data[operationStore.index].id:'')
let operationName = ref(operationStore.data.length>0?operationStore.data[operationStore.index].businessName:'')
let operationList = ref(operationStore.data)
operationStore.$subscribe(async(mutation, state)=>{
  operationId.value=operationStore.data[operationStore.index].id
  operationName.value=operationStore.data[operationStore.index].businessName
  operationList.value=operationStore.data
})
// 修改当前业务
const changeOper=(idx)=>{
  operationStore.updateCheck(idx)
}
// 主题选择显示
const themeDialogVisible = ref(null);
// 路由
const $route = useRoute()
const $router = useRouter();
// nav选中路由（中间部分）
const nowBusiness = ref(0);
// 获取 Business 路由下的所有子路由

const businessRoute=ref($router.getRoutes().find(route => route.name === 'Business'))

const getBusinessRoutes = () => {
  return businessRoute.value?.children?.filter(route => route.meta?.title) || [];
};
const businessRoutes = ref(getBusinessRoutes());

// 当前业务的所有子路由
const fcs = getBusinessRoutes();
// 跳转到指定的路由
const navigateTo = (idx, path) => {
  nowBusiness.value = idx;
  $router.push({
    path: `/business/${path}`,
    query: $route.query
  });
};

// 其他功能
// 前往首页
const toHome = () => {
  $router.push('/home');
};
// 前往管理页
const toManage = () => {
  $router.push('/manage');
};
// 退出登录
const exit = () => {
  ElMessage({
    message: '退出成功',
    type: 'success'
  });
  userStore.logout()
  $router.replace('/login');
};
// 打开主题选择
const openThemeDialog = () => {
  themeDialogVisible.value.open();
};


onMounted(() => {
  const matchedRoute = fcs.find(item => $route.fullPath.startsWith(`/business/${item.path}`));
  if (matchedRoute) {
    nowBusiness.value = fcs.indexOf(matchedRoute);
  }
  eventBus.on('updateBusinessRoutes', () => {
    businessRoute.value=$router.getRoutes().find(route => route.name === 'Business')
    businessRoutes.value = []
    businessRoutes.value = getBusinessRoutes();
  });
})
</script>

<style scoped lang="scss">
@use '@/styles/businessNav.scss';
@use '@/styles/themes.scss';
</style>
